import React, { PureComponent } from 'react';
import { connect } from 'react-redux';

import { TopicWrapper, TopicItem } from '../style';

class Topic extends PureComponent {
	render() {
		const { list } = this.props;  // immutable 对象，可通过 toJS() 方法转换为 js 对象操作，详见 Header

		return (
			<TopicWrapper>
				{list.map(item => (
					// immutable 对象 API
					<TopicItem key={item.get('id')}>
						<img className="topic-pic" src={item.get('imgUrl')} alt="" />
						{item.get('title')}
					</TopicItem>
				))}
			</TopicWrapper>
		);
	}
}

const mapStateToProps = state => ({
	// immutable 对象 API

	list: state.getIn(['home', 'topicList'])
	// or
	// list: state.get('home').get('topicList')
});

export default connect(
	mapStateToProps,
	null
)(Topic);
